<template>
	<zw-dialog :hidden="hidden" title="退款详情" :width="500" :height="600" :showHeaderBg="false" borderRadius @close="closeDialog">
		<view class="form-wrap">
			<view class="hea box">
				<view class="tis" v-if="goods.refundDealStatus == 0">买家申请退款，待商家处理</view>
				<view class="tis" v-if='goods.refundDealStatus == 1'>商家同意退款，请将货物寄回并填写物流单号</view>
				<view class="tis" v-if='goods.refundDealStatus == 2'>商家拒绝退款<view class="btn" @click="secShow = true" style="margin: 0;font-size: 15px;">重新申请退款</view></view>
				<view class="tis" v-if="goods.refundDealStatus == 3">商品已寄回，请等待商家查验后退款</view>
				<view class="tis" v-if="goods.refundDealStatus == 5">商家已退款</view>
				<view class="text" v-if="goods.refundExpress">物流单号: {{goods.refundExpress}} </view>
				<view class="btn" v-if='goods.refundDealStatus==1' @click="showExpress = true">填写物流单号</view>
				<view class="time" v-if='goods.refundDealStatus == 2'>拒绝理由：{{goods.refundRefuseDetail}}</view>
				<view class="tis" v-if='goods.refundDealStatus == 4'>商家拒绝退款，请联系平台介入</view>
			</view>
			<view class="box goods">
				<view class="tis">退款信息</view>
				<view class="center">
					<img class="goodImg" :src="goods.logo" alt="">
					<view class="info">
						<view class="name">
							{{ goods.productName}}
							<view class="Price">¥ {{goods.price}}</view>
						</view>
						<view class="type">
							<view class="state">
								<label class="label">{{goods.skuName}}</label>
							</view>
							<view class="num">X{{goods.number}}</view>
						</view>
					</view>
				</view>
			
				<view class="ulinfo">
					<view class="li">退款原因：{{goods.refundReason}}</view>
					<view class="li">退款金额：￥{{goods.price}}</view>
					<view class="li">申请时间：{{goods.refundCreateTime | formatDate('-')}}</view>
					<view class="li" v-if="goods.refundOrderNum">退款编号：{{goods.refundOrderNum}}</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showExpress" border-radius="15" mode="bottom" close-icon-pos="top-right"
			:closeable="true" @touchmove.prevent :safe-area-inset-bottom='true'>
			<view class="popup">
				<view class="title">填写物流单号</view>
				<view class="list">
					<u-form ref="uForm" >
						<u-form-item label-width='130' label="物流单号"><u-input v-model="refundExpress" /></u-form-item>
					</u-form>
				</view>
				<view class="popupBtn" @click="submit">确定</view>
			</view>
		</u-popup>
		<u-popup v-model="secShow" border-radius="15" mode="bottom" close-icon-pos="top-right"
			:closeable="true" @touchmove.prevent :safe-area-inset-bottom='true'>
			<view class="popupBox">
				<view class="title">退款理由</view>
				<view class="list">
					<view class="item" v-for="(item,index) in list" :key="index" @click="choose(index)">
						<text>{{item.name}}</text>
						<image src="../../../static/image/common/checkOn.png" v-if="item.select"></image>
						<image v-else src="../../../static/image/common/check-1.png" ></image>
					</view>
				</view>
				<view class="popupBtn" @click="submitAgain()">重新提交</view>
			</view>
		</u-popup>
		
	</zw-dialog>
</template>

<script>
	

	export default {
		props: {
			hidden: true,
			goodsId:String
		},
		data() {
			return {
				
				refundExpress:'',
				orderId:'',
				status:'',
				price:0,
				goods: {},
				showExpress:false,
				show:false,
				secShow:false,
				list:[
					{name:'订单信息拍错',select:false},
					{name:'我不想要了',select:false},
					{name:'地址/电话信息填错',select:false},
					{name:'发货太慢',select:false},
					{name:'缺货',select:false}
				],
				showText:'',
				chooseIndex:-1,
			}
		},
		created() {
			
		},
		methods: {
			getData(){
				this.uni_request({
					url: '/user/order/orderDetail/'+this.goodsId,
					method: 'POST',
					success: (res) => {
						
						if (res.data.code == 0 || res.data.code == 200) {
							this.goods = res.data.data	
							
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			closeDialog() {
				this.$emit('update:hidden', true);
			},
			choose(index){
				this.chooseIndex = index
				for (var i = 0; i < this.list.length; i++) {
					if(index == i){
						this.list[i].select = true
					}else{
						this.list[i].select = false
					}
				}
				
			},
			submitAgain(){
				if(this.chooseIndex== -1){
					uni.showToast({
						icon:'none',
						title:'请选择退款理由'
					})
					return false
				}
				this.showText = this.list[this.chooseIndex].name
				uni.showLoading({
					title:'加载中'
				
				})
				this.uni_request({
					url: '/user/order/refundGoods',
					method: 'POST',
					data:{
						orderDetailId:this.goods.orderDetailId,
						refundReason:this.showText
					},
					success: (res) => {
						
						uni.hideLoading()
						if (res.data.code == 0 || res.data.code == 200) {
							this.secShow = false;
							uni.showToast({
								icon:'success',
								title:'提交成功'
							})
							
							this.getData()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			copy() {
				uni.setClipboardData({
					data: this.refundExpress,
					success: () => {
						uni.showToast({
							title: "复制成功",
							icon:'none'
						})
					}
				});
			},
			submit(){
				if(!this.refundExpress){
					uni.showToast({
						icon:'none',
						title:'请填写物流单号'
					})
					return false
				}
				uni.showLoading({
					title:'加载中'
				
				})
				this.uni_request({
					url: '/user/order/addRefundExpressNum',
					method: 'POST',
					data:{
						orderDetailId:this.goods.orderDetailId,
						refundExpress:this.refundExpress
					},
					success: (res) => {
						uni.hideLoading()
						if (res.data.code == 0 || res.data.code == 200) {
							this.show = true
							this.showExpress = false
							uni.showToast({
								icon:'none',
								title:'物流单号提交成功'
							})
							this.getData()
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			
		},
		filters: {
			// 时间戳处理
			formatDate: function(value, spe = '.', k=' ' , mh=':') {
				let data = new Date(value);
					
				let year = data.getFullYear();
				let month = data.getMonth() + 1;
				let day = data.getDate();
				let h = data.getHours();
				let mm = data.getMinutes();
				let s = data.getSeconds();
				month = month > 9 ? month : "0" + month;
				day = day > 9 ? day : "0" + day;
				h = h > 9 ? h : "0" + h;
				mm = mm > 9 ? mm : "0" + mm;
				s = s > 9 ? s : "0" + s;
				return `${year}${spe}${month}${spe}${day}${k}${h}${mh}${mm}${mh}${s}`;
			},
			gName(e) {
				if (e) {
					var text1 = e.substr(0, 15);
					var Text = text1 + "***"
					return Text;
				}
			},
			Gmoney(val) {
				
				return "<span>55</span>";
			}
		
		}
	}
</script>

<style lang="scss">
	.popupBox{
		height: 400px;padding-top: 13px;
		.title{
			width: 100%;display: flex;align-items: center;justify-content: center;
			font-size: 18px;color: #000;
			padding-bottom: 14px;
		}
		.list{
			padding: 0 10px;
			.item{
				height: 50px;display: flex;align-items: center;justify-content: space-between;
				image{
					width: 25px;height: 25px;
				}
			}
		}
		.popupBtn{
			width: 100%;
			margin-top: 50px;
			height: 49px;
			color: #fff;cursor: pointer;
			font-size: 16px;
			background: #e30000;
			display: flex;align-items: center;justify-content: center;
		}
	}
	.popup{
		height: 211px;padding-top: 13px;
		.title{
			width: 100%;display: flex;align-items: center;justify-content: center;
			font-size: 18px;color: #000;
			padding-bottom: 14px;
		}
		.list{
			padding: 0 10px;
			border-bottom: 1px solid #e5e5e5;
		}
		.popupBtn{
			width: 100%;
			margin-top: 55px;
			height: 49px;
			color: #fff;cursor: pointer;
			font-size: 16px;
			background: #e30000;
			display: flex;align-items: center;justify-content: center;
		}
	}
	.form-wrap {
		width: 100%;
		margin: 0 20px;
		padding: 20px  0;
		border-top: 1px solid $border-color;
		
		
		.box {
			margin: 10px;
			padding: 20rpx;
			box-sizing: border-box;
			background: #FFF;
			border-radius: 10rpx;
		}
		
		.hea {
			.btn{
				margin-top: 10px;
				cursor: pointer;
				width: 110px;
				border-radius: 30px;
				padding: 1px 0;
				font-size: 15px;
				text-align: left;
			}
			.btn:hover{
				color:#e30000;
			}
			.text{
				font-size: 13px;
				margin-top: 10px;
				color: #999;
				display: flex;align-items: center;justify-content: flex-start;
				image{width: 15px;height: 15px;margin-right: 1px;}
				.copyBox{
					display: flex;align-items: center;justify-content: center;
					color: #999;margin-left: 10px;
				}
			}
			.tis {
				font-weight: 700;
				
				font-size: 16px;
				display: flex;
				align-items: center;justify-content: space-between;
			}
		
			.time {
				color: #999;
				font-size: 26rpx;
				line-height: 50rpx;
			}
		}
		
		.info {
			.tis {
				font-weight: 700;
				color: #333;
				font-size: 16px;
			}
		
			.int {
				padding: 10rpx 0;
				font-size: 26rpx;
				line-height: 50rpx;
				color: #999;
			}
		
			.content {
				min-height: 100rpx;
				font-size: 26rpx;
				line-height: 50rpx;
				color: #999;
				display: flex;
		
				.text {
					flex: 1;
					line-height: 40rpx;
				}
			}
		}
		
		.jilu {
			display: flex;
			padding: 16px;
		
			.text {
				flex: 1;
			}
		}
		
		.goods {
			.tis {
				font-weight: 700;
				color: #333;
				font-size: 16px;
			}
			
			.center {
				display: flex;
				margin: 20rpx 0;
		
				.goodImg {
					width: 240rpx;
					height: 240rpx;
					background: #efefef;
				}
		
				.info {
					flex: 1;
					padding-left: 20rpx;
		
					.name {
						
						font-size: 16px;
		
						.Price {
							float: right;
							font-size: 35rpx;
						}
					}
		
				}
		
				.type {
					display: flex;
					height: 90rpx;
					margin-top: 10px;
					width: 100%;
					.state {
						flex: 1;
		
						.label {
							border-radius: 16px;
							line-height: 25rpx;
							font-size: 20rpx;
							background: #efefef;
							color: #bbb;
							padding: 0px 15rpx;
						}
					}
				}
		
			}
		
			.ulinfo {
				padding: 10rpx 0;
				font-size: 26rpx;
				line-height: 50rpx;
				color: #999;
			}
		
		}
		
		
		.bottom {
			position: fixed;
			bottom: 0px;
			left: 0px;
			width: 100%;
			text-align: right;
		
			background: #FFF;
			padding: 20rpx 16px;
			box-sizing: border-box;
		
			.btn {
				display: inline-block;
				color: #999;
				border: 1px solid #ddd;
				margin: 0px 10rpx;
				height: 60rpx;
				padding: 0px 20rpx;
				line-height: 56rpx;
				box-sizing: border-box;
				border-radius: 16px;
			}
		
		}
	}
</style>
